<template>
  <div style="margin: 30px 0 200px 0;" :class="{'topic-comments-home': textRows === '1'}">
    <!-- 评论输入区 -->
    <div class="comments-publish" >
      <!-- <p>您有什么想说的，可以在这里发表评论！(不超过500字)</p> -->
      <textarea name="name" :rows="textRows" class="width-full" placeholder="参与评论" v-model="comment"></textarea>
      <el-button type="success" class="fr" plain round @click="sendComments()">发表评论</el-button>
    </div>
    <!-- 评论展示区 -->
    <div class="comments-display">
      <div class="flex-row comments-display-all" v-for="(co, index) in comments" :key="index">
        <div class="comments-avatar">
          <img  v-lazy="co.profilePicture ? co.profilePicture : 'static/morentouxiang.png'" alt="" style="height: 50px;">
        </div>
        <div class="flex-all" style="width: 530px;">
          <div class="">
            <span class="comments-nick">{{co.nickName}}</span>
            <span class="comments-time">{{$formatDateTime(co.commentTime)}}</span>
          </div>
          <p class="comments-display-content">{{co.commentContent}}</p>
          <span class="list-footer-fs comments-footer" @click="addReply(index)">
            <i class="el-icon-edit"></i>
            回复
          </span>
          <!-- 子评论 -->
          <div class="flex-row comments-display-all" v-for="(com, i) in co.mscsReplyVos" :key="i">
            <div class="comments-avatar">
              <img :src="com.profilePicture ? com.profilePicture : 'static/morentouxiang.png'" alt="" style="height: 50px;">
            </div>
            <div class="flex-all"  style="width: 460px;">
              <div class="">
                <span class="comments-nick">{{com.nickName}}</span>
                <span class="comments-time">{{$formatDateTime(com.commentTime)}}</span>
              </div>
              <p class="comments-display-content">{{com.commentContent}}</p>
            </div>
          </div>
          <div class="comments-publish" style="padding-top: 10px;" v-show="active === index">
            <textarea name="name" :rows="textRows" class="width-full" ref="reply"
            style="font-size: 14px;" placeholder="请输入要回复的内容"
            v-model="reply"></textarea>
            <el-button type="success" class="fr" size="mini"
            style="font-size: 12px;" round
            @click="sendReply(index, co)">回复</el-button>
            <el-button type="success" class="fr" size="mini"
            style="font-size: 12px;margin-right: 30px;"
            plain round @click="cannelReply()">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  title: '话题评论',
  name: 'topic-comments',
  props: {
    info: {},
    coms: {
      default: () => {
        return []
      }
    },
    textRows: {
      type: String,
      default: '5'
    }
  },
  data () {
    return {
      comment: '', // 评论
      reply: '', // 回复
      active: '-1', // 激活的下标
      comments: [],
    }
  },
  mounted () {
    this.comments = this.coms
  },
  methods: {
    sendComments () {
      if (!this.isLogin) {
        this.$openLogin()
        return
      }
      if (!this.comment || this.reply.comment === 0) {
        this.$message({
          message: '评论不能为空',
          type: 'warning'
        })
        return
      }
      if (this.comment.length > 500) {
        this.$message({
          message: '评论内容不能超过500字',
          type: 'warning'
        })
        return
      }
      let obj = {
        commentContent: this.comment, //评论内容
        commentIsAnonymouns : 'NO', //是否匿名 YES 是 ; NO 否
        commentPeopleId : this.$store.state.user.user.user.userId, //评论者id ,
        commentType : 'COMMENT', //评论类型：COMMENT 评论 ; REPLY 回复 ,
        modelId : this.info.modelId || this.info.topicId, //模块id：话题id/企业主页id/需求id/收藏id/资讯id ,
        modelType: 'TOPIC'
      }
      axios.post('/mscs/topic/userCommentOrReply', obj).then((res) => {
        if (res.data.code === 1) {
          let url = this.$store.state.user.user.userDetails.profilePicture
          let nickName = this.$store.state.user.user.userDetails.nickName
          this.comments.unshift({
            commentContent: this.comment,
            commentId: res.data.data,
            commentPicture:null,
            commentPeopleId: this.$store.state.user.user.user.userId,
            commentType:"COMMENT",
            commentTime: new Date().getTime(),
            nickName: nickName ? nickName : this.$store.state.user.user.user.username,
            profilePicture: url ? url : 'static/morentouxiang.png',
            mscsReplyVos: []
          })
          this.comment = ''
          this.$emit('comment-success')
        }
      }).catch((error) => {
        this.$catchError(error)
      })

    },
    addReply (index, info) {
      if (!this.isLogin) {
        this.$openLogin()
      } else {
        this.active = index
        setTimeout(() => {
          this.$refs.reply[index].focus()
        }, 16.67)

      }
    },
    cannelReply () {
      this.active = -1
    },
    sendReply (index, parent) {
      if (!this.reply || this.reply.length === 0) {
        this.$message({
          message: '回复不能为空',
          type: 'warning'
        })
        return
      }
      if (this.reply.length > 500) {
        this.$message({
          message: '回复内容不能超过500字',
          type: 'warning'
        })
        return
      }
      let obj = {
        commentContent: this.reply, //评论内容
        commentIsAnonymouns : 'NO', //是否匿名 YES 是 ; NO 否
        commentParentId : parent.commentId, //评论父级id
        commentPeopleId : this.$store.state.user.user.user.userId, //评论者id ,
        commentType : 'COMMENT', //评论类型：COMMENT 评论 ; REPLY 回复 ,
        modelId : this.info.modelId || this.info.topicId, //模块id：话题id/企业主页id/需求id/收藏id/资讯id ,
        modelType : 'TOPIC', //ENTERPRISE 企业模块;REQUIRE 需求模块;TOPIC 话题模块;INFORMATION 资讯模块

      }
      axios.post('/mscs/topic/userCommentOrReply', obj).then((res) => {
        if (res.data.code === 1) {
          let url = this.$store.state.user.user.userDetails.profilePicture
          let nickName = this.$store.state.user.user.userDetails.nickName
          if (!(this.comments[index].mscsReplyVos instanceof Array)) {
            this.comments[index].mscsReplyVos = []
          }
          this.comments[index].mscsReplyVos.push({
            commentContent: this.reply,
            commentId: res.data.data,
            commentPeopleId: this.$store.state.user.user.user.userId,
            commentPicture:null,
            commentTime: new Date().getTime(),
            nickName: nickName ? nickName : this.$store.state.user.user.user.username,
            profilePicture: url ? url : 'static/morentouxiang.png',
          })
          this.reply = ''
          this.$emit('comment-success')
        }
      }).catch((error) => {
        this.$catchError(error)
      })
    },

  },
  computed: {
    isLogin () {
      return this.$store.state.user.isLogin
    }
  },
  watch: {
    'comments': {
      handler: function (val, oldVal) {
        this.$emit('update:coms', this.comments)
      },
      deep: true
    },
    'likestatus' () {
      this.$emit('update:like', this.likestatus)
    },
    'coms' () {
      this.comments = this.coms
    }
  }
}
</script>
<style lang="scss"scoped>
  .topic-comments-home {
    margin-top: 5px!important;
    margin-bottom: 20px!important;
    .comments-display {
      margin-top: 0px;
      .comments-avatar {
        width: 20px;
        height: 20px!important;
        img {
          max-width: 110%;
          height: auto!important;
        }
      }
    }
    .comments-publish {
      padding-top: 10px;
      display: flex;
      > textarea {
        border-left: 5px solid #94C05A;
      }
      > button {
        margin-left: 8px;
        height: 45px;
        border-radius: 5px;
      }
    }
  }
</style>
